<template>
    <!-- 首页在这里写 -->
    <div class="home">
        <div class="home_main">
            <div class="home_main_item" @click="$router.push({name:'Experts'})">专家库</div>
            <div class="home_main_item" @click="$router.push({name:'Knowledge'})">知识库</div>
            <div class="home_main_item" @click="$router.push({name:'OnlineSeekSend'})">在线咨询</div>
            <div class="home_main_item" @click="$router.push({name:'SmartSeek'})">AI智能客服</div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .home{
        min-height: var(--globalHeight);
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        /* background-image: url("@/assets/gufeng.jpg"); */
        background-image: url("../../../assets/gufeng.jpg");
        /* background-image: url("../../../../static/image/gufeng.jpg"); */
    }
    .home_main{
        width: 570px;
        height: 400px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* background-color: var(--homeBgColor); */
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 5px 5px var(--shodowColor);
    }
    .home_main_item{
        cursor: pointer;
        width: calc(50% - 20px);
        box-sizing: border-box;
        margin: 10px;
        border-radius: 10px;
        border: 1px solid var(--borderColor);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        color: #5cb840;
        background-color: #fff;
        transition: all 1s;
    }
    .home_main_item:hover{
        background-color: #888;
        color: #ffffff;
    }
    @media screen and (max-width:1000px){
        .home_main{
            width: 100%;
            flex-direction: column;
        }
        .home_main_item{
            /* width: 90%; */
            flex: 1;
            width: calc(100% - 20px);
        }
    }
</style>
